<template>
  <div class="app"> 
        <div class="aa"> 
        <div class="a">
            <div class="top">
        </div>
            <h4>用户登录</h4>
          <el-form  status-icon   label-width="50px" class="demo-ruleForm">
              <el-form-item >
              <el-input class="username" type="username" v-model="params.username" autocomplete="off" style="width:260px" placeholder="请输入用户名" ></el-input>
              </el-form-item>
              <el-form-item >
              <el-input class="password" type="password"  v-model="params.password" autocomplete="off" style="width:260px" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
              <el-button type="primary" @click="login" style="width:260px">登录</el-button>
              </el-form-item>
          </el-form>
        <div>
        &nbsp;&nbsp;<span style="color: #A9A9AB">忘记密码？</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000099;">立即注册 ></span>
        </div>
        </div>
    </div>
 </div>
</template>
<style>
h4{
  margin-left: 48px;  
}
.aa{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 500px;
  width: 100%;
  background: url("../assets/login1.jpg");
}
.a{
  width: 350px;
  height:300px;
  background-color:#FFFFFF;
  opacity: 0.98;
   display: block;
    position: fixed;
    _position: absolute;
    top: 60%;
    left: 70%;
    margin-left: -400px;
    margin-top: -200px;
    z-index: 10001;
    box-shadow: 2px 2px 4px #DFDBE7;
    padding-right:50px;
}
.username{
  width: 130px;
  background: #FFFFFF url("../assets/user.jpg");

}
.password{
  width: 130px;
  background: #FFFFFF url("../assets/user.jpg");
}
.top{
    height: 35px;
    width: 294px;
    background-color:#009DFB;
    display: block;
    position: fixed;
    _position: absolute;
    top:60.01%;
    left: 70%;
    margin-left: -400px;
    margin-top: -200px;
    z-index: 10001;
    border-bottom-left-radius: 72px ;
    border-bottom-right-radius: 72px;
    
    
}
</style>
<script>
  export default {
    data() {
      return {
        params:{
          username:"",
          password:"",
        },
        errorMsg:'',
      };
    },
    methods: {
             login(){
            //alert(this.admin.username); 
            //alert(this.admin.password);
            this.$api._api_login(this.params ).then(
              data=>{
                 console.log(data);
              if(data.code===200){
                 //alert(response.data.msg);
                 // this.errorMsg="登录有效";
                 //取到token后放到本地localstorage里面存储
                 //放到本地存储当其他组件改变时其不会改变，其不是响应式的，而采用vuex集中管理，是响应式的
                 window.localStorage.setItem("token",data.data.token);
                 // this.$store.dispatch("login",response.data.data)
                 //vuex管理登录状态
                this.$router.push("/");
                this.$store.dispatch("login",data.data);
              }else{
                 this.errorMsg=data.msg;
              }
            }
              
            );
        }

    }
  }
  </script>